<template>
    <div>
      <!-- <button @click="getModefiedData()">getModefiedData</button> -->
      <el-row >
        <el-col :span="20">
          <el-form label-width="60px" >
            <el-form-item label="标题" prop="title" >
              <el-input v-model="title"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="1" :offset="3">
          <el-button type="primary" icon="el-icon-edit" circle @click="write()">写</el-button>
        </el-col>
        <el-col :span="24">
          <div class="extend">
            <mavon-editor @save="save" @change="changeData"  
              toolbarsBackground="#90ee90" 
              previewBackground="#919191" 
              :toolbars="toolbars" 
              v-model="value" style="height:100%" 
              :ishljs = "true"/>
          </div>            
        </el-col>
      </el-row>
    </div>
</template>

<script>
import header from '../components/header.vue';
  export default{
    data(){
      return{
        value:"",
        defaultData:"preview",
        // render1:null,
        title:this.$store.state.Article.article_title,
        toolbars: {
          bold: null, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        },
        article_content:'',
        flag:true,
      };
    },
    methods: {
      write(){
        this.flag = true;
        this.value = '';
        this.title = '';
        console.log(this.flag);
        
      },
      getModefiedData(){
        let that = this;
        this.$axios.post("/queryArticleById",{
          article_id:this.$store.state.articleid,
        })
        .then((res)=>{         
          that.value = res.data.object.article_summary;
          this.flag = false;
          console.log(that.value);
        })
        .catch((err)=>{
          console.log(err)
        })
      },
      changeData(value, render) {
            // console.log("v:"+value);
            // console.log("r:"+render);
            // this.render1 = render;
            // this.contentHtml = render;
        },
        save(value,render){
          if(this.flag){
            this.$axios.post("/saveArticle",{
              article_content:render,
              article_title:this.title,
              article_summary:value,
            })
            .then((res)=>{
              // console.log(res);
              alert("已保存文档");
              return res;
            })
            .catch((err)=>{
              console.log(err);
            })
          }
          else{
            this.$axios.post("/updateArticleById",{
              article_id:this.$store.state.articleid,
              article_content:render,
              article_title:this.title,
              article_summary:value,
            })
            .then((res)=>{              
              console.log(res);
              console.log(this.flag);
              console.log(this.title);
              alert("已修改文档");
              return res;
            })
            .catch((err)=>{
              console.log(err);
            })
          }          
        }      
    },
    components:{'header1':header},
    created() {
      this.getModefiedData();
    },
  }

</script>

<style>
.extend {
  width: 100%;
  height: 80vh;
}
    
</style>